<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>团购首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		<div id="web">
			<!--头部-->
			<header>
				<div class="head-logo fl" >
					<a href=""><img src="img/logo.png"/></a>
				</div>
				
				<!--下拉框-->
				<div class="selectBar fr">
					<select name="" id="">
						<option value="">广州</option>
						<option value="">深圳</option>
					</select>
				</div>
					
				<!--搜索框-->
				<div class="searchBar " >
					<input type="text" name="" id="" value="" />
					<img src="img/images/search_03.png"/>
				</div>
			</header>
		
		<div class="session">
			<div class="lunbo">
				<img src="img/content.jpg"/>
			</div>
			<div class="youhui">
				<div class="youhui-text">
					<div class="youhui-title">
						<img src="img/icon1.png"/>
						<span>优惠团购</span>
					</div>
					
					<div class="more">
						<span>更多</span>
						<img src="img/icon2.png"/>
					</div>
				</div>
			</div>
			<div class="youhui-xiangxi">
				<div class="youhui-photo">
					<div class="yh-photo1">
						<img src="img/goods.jpg"/>
					</div>
					<div class="yh-photo2">
						<img src="img/goods2.jpg"/>
					</div>
					<div class="yh-photo3">
						<img src="img/goods3.jpg"/>
					</div>
					<div class="yh-photo4">
						<img src="img/goods4.jpg"/>
					</div>
				</div>
			</div>
			<div class="youlike">
				<div class="youlike-title">
					<img src="img/icon3.png"/>
						<span>猜你喜欢</span>
				</div>
				<div class="more">
						<span>更多</span>
						<img src="img/icon2.png"/>
					</div>
			</div>
			
		
		<div class="youlike-xiangxi">
			<div class="youlike1">
				<div class="like-img fl">
					<img src="img/food.jpg"/>
				</div>
				<div class="like-text">
					<p class="like-p1">万岁寿司（正佳店）<span><100m</span></p>
					<p class="like-p2">[100店通用] 双人套餐</p>
					<p class="like-p3">￥88.00 <span>已售1000</span></p>
				</div>
				
				
			</div>
			<div class="youlike2">
				<div class="like-img fl">
					<img src="img/food2.jpg"/>
				</div>
				<div class="like-text">
					<p class="like-p1">周黑鸭（正佳店）<span><100m</span></p>
					<p class="like-p2">[100店通用] 双人套餐</p>
					<p class="like-p3">￥88.00 <span>已售1000</span></p>
				</div>
				
				
			</div>
		</div>
		</div>
		<footer>
			<ul>
			<li class="fl ">
				<a href="" class="active">
				<i class="iconfont icon-path"></i>
				<p>首页</p>
				</a>
			</li>
			<li class="fl">
				<a href="" >
			<i class="iconfont icon-star1"></i>
			<p>分类</p>
				</a>
			</li>
			<li class="fl " >
				<a href="" >
				<i class="iconfont icon-zhinanzhen"></i>
				<p>发现</p>
				</a>
			</li>
			<li class="fl ">
				<a href="" >
			<i class="iconfont icon-user"></i>
			<p>我的</p>
			</a>
			</li>
			</ul>
		</footer>
		</div>
		<!--//自动计算根字体大小的脚本-->
		<script>
    
        
		document.body.style.height = window.innerHeight + "px";
		//安卓手机，如果不获取一开始的高度，固定住，虚拟键盘会影响body的高度，（底部顶上去），所以在一开始加载时把body的原本高度给固定住
		
        /*动态改变根元素字体大小*/
        function recalc() {
            var clientWidth = document.documentElement.clientWidth;
            if(!clientWidth) return;
            document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
                                        // 字体大小   = 1个rem单位表示多少个像素（设备的宽度   /设计宽度）
        }

        function initRecalc() {
            recalc();
            var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
            if(!document.addEventListener) return;
            window.addEventListener(resizeEvt, recalc, false);
            document.addEventListener('DOMContentLoaded', recalc, false);
        }
        initRecalc();
    
    
    
    </script>
	</body>
</html>
